<template>
  <div style="padding:30px;">
    <!--    搜索框-->
    <el-form :inline="true" :model="keyword" class="demo-form-inline">
      <el-form-item label="商品名称">
        <el-input v-model="keyword.gdName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="仓库">
        <el-select v-model="keyword.skDepot" placeholder="请选择" @change="search">
          <el-option v-for="dep in depot" :label="dep" :value="dep" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">清空</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="goodsInStock" icon="el-icon-plus">商品入库</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="success" @click="dialogExcelVisible = true" icon="el-icon-upload2">导入</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="dowmLoad('searchForm')" icon="el-icon-download">导出</el-button>
      </el-form-item>
    </el-form>

    <!--    库存表格展示-->
    <el-table :data="goodsStock" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="gdName" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="skDepot" label="仓库" align="center"></el-table-column>
      <el-table-column prop="skStockNum" label="库存" align="center"></el-table-column>
      <el-table-column prop="skInStock" label="已入库" align="center"></el-table-column>
      <el-table-column prop="skOutStock" label="已出库" align="center"></el-table-column>
      <el-table-column prop="skLeaStock" label="剩余库存" align="center"></el-table-column>
      <el-table-column prop="skOperator" label="操作人" align="center"></el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="stockUpdate(scope.row)"
          >更新</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="stockDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>



<!--    添加对话框-->
    <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="formInline" :rules="addStockRules" ref="addStockRulesForm">
        <el-form-item label="入库仓库" prop="skStock">
          <el-select v-model="formInline.skStock" placeholder="请选择仓库" style="width: 300px">
            <el-option v-for="dep in depot" :label="dep" :value="dep" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="gdName">
<!--          <el-select v-model="formInline.gdName" placeholder="请选择" style="width: 300px">-->
<!--            <el-option v-for="name in storeName" :label="name" :value="name" ></el-option>-->
<!--          </el-select>-->
          <el-input v-model="formInline.gdName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="入库数量" prop="skInStock">
          <el-input v-model="formInline.skInStock" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="操作人" prop="skOperator">
          <el-select v-model="formInline.skOperator" placeholder="请选择" style="width: 300px">
            <el-option v-for="per in operator" :label="per" :value="per" ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog('addStockRulesForm')">取 消</el-button>
        <el-button type="primary" @click="addGoodsInStock('addStockRulesForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--    更新对话框-->
    <el-dialog :title="updateDialogName" :visible.sync="updateDialogFormVisible" width="30%">
      <el-form :model="formInStock" :rules="updateStockRules" ref="updateStockRulesForm">
        <el-form-item label="入库仓库" prop="skStock">
          <el-select v-model="formInStock.skStock" placeholder="请选择仓库" style="width: 300px">
            <el-option v-for="dep in depot" :label="dep" :value="dep" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="gdName">
          <el-input v-model="formInStock.gdName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" prop="skStockNum">
          <el-input v-model="formInStock.skStockNum" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="入库数量" prop="skInStock">
          <el-input v-model="formInStock.skInStock" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="出库数量" prop="skOutStock">
          <el-input v-model="formInStock.skOutStock" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="操作人" prop="skOperator">
          <el-select v-model="formInStock.skOperator" placeholder="请选择" style="width: 300px">
            <el-option v-for="per in operator" :label="per" :value="per" ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialog('updateStockRulesForm')">取 消</el-button>
        <el-button type="primary" @click="updateGoodsInStock('updateStockRulesForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 上传excel的对话框 -->
    <el-dialog title="上传计量单位Excel" :visible.sync="dialogExcelVisible" width="40%">
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8088/nested/upload"
        accept=".xlsx,.xls"
        :on-success="uploadExcelSuccess"
        :on-error="uploadExcelError"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传.xlsx,.xls文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>



    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
import { findDepot, getListM3, addStock, findOperator, editStock, delByStockId } from '@/api/nested'
import router from '@/router'
export default {
  data(){
    return {
      pageNum:1,
      pageSize:5,
      currentPage:1,
      total:0,
      depot:[],
      operator:[],
      storeName:[],
      dialogName:'',
      updateDialogName:'',
      dialogFormVisible:false,
      updateDialogFormVisible:false,
      dialogExcelVisible:false,
      inStock:null,
      keyword: {
        gdId: '',
        gdName:'',
        skDepot:'',
      },
      formInline:{
        gdName:null,
        skStock:null,
        skOperator:null,
        skInStock:null,
      },
      formInStock:{
        skOutStock:null,
        skStockNum:null,
        gdName:null,
        skStock:null,
        skOperator:null,
        skInStock:null,
      },
      updateStockRules:{
        skStock:[
          { required: true, message: '仓库不能为空', trigger: 'change' },
        ],
        skInStock:[
          { required: true, message: '入库数量不能为空不能为空', trigger: 'blur' },
        ],
        skOutStock:[
          { required: true, message: '出库不能为空', trigger: 'blur' },
        ],
        gdName:[
          { required: true, message: '商品名称不能为空', trigger: 'blur' },
        ],
      },
      addStockRules:{
        skStock:[
          { required: true, message: '仓库不能为空', trigger: 'change' },
        ],
        skInStock:[
          { required: true, message: '入库数量不能为空不能为空', trigger: 'blur' },
        ],
        gdName:[
          { required: true, message: '商品名称不能为空', trigger: 'blur' },
        ],
      },
      goodsStock:[],
    }
  },
  methods:{
    fetchData() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        gdName:this.keyword.gdName,
        skDepot:this.keyword.skDepot,
        //gdCategory:this.formInline.gdCategory
      }
      //getList是api/unit/.js中的
      getListM3(params).then(res => {
        let pageInfo = res.data;
        //console.log("pageInfo.list",pageInfo.list)
        this.goodsStock = pageInfo.list;
        this.total = pageInfo.total;
      })
    },

    operatorLiat(){
      findOperator().then(res => {
      this.operator = res.data
      })
    },

    //仓库分类搜索
    depotList(){
      findDepot().then(res => {
        this.depot = res.data;
      })
    },

    //商品名称下拉菜单
    // nameList(){
    //   findName().then(res => {
    //     this.storeName = res.data;
    //   })
    // },

    //商品入库
    goodsInStock(){
      this.dialogName = '添加';
      this.dialogFormVisible = true;
    },

    //取消添加对话框
    addDialog(formName){
      this.$refs[formName].resetFields();
      //this.dialogName = false;
      this.dialogFormVisible = false;
      //点击取消，表单置空
      this.formInline = {}
      // this.addStockRules = {}
    },

    //取消更新对话框
    updateDialog(formName){
      this.$refs[formName].resetFields();
      this.updateDialogFormVisible = false;
      //点击取消，表单置空
      this.formInStock = {}
      //this.updateStockRules = {}
    },

    //模糊搜索
    search(){
      this.fetchData()
    },

    //重置表单
    resetSearchForm(searchForm){
      this.keyword = {}
      this.fetchData()
    },

    //多选框
    handleSelectionChange(selectionRowArr) {
      this.ids = [];
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].gdId)
      }
    },

    // 页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val; // 将当前页大小存起来，方便下一方法使用
      console.log(`每页 ${val} 条`);
      this.fetchData()
    },

    // 当前页码改变时触发
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log(`当前页: ${val}`);
      this.fetchData()
    },

    // 修改
    stockUpdate(row){
      this.updateDialogName = '更新';
      this.updateDialogFormVisible = true;
      this.formInStock = row;
    },

    //添加新库存
    addGoodsInStock(formName){
      this.$refs[formName].validate((valid) => {
        if(valid){
          addStock(this.formInline).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功!',
              duration:1000
            });
            this.fetchData();
          })
        }else{
          this.$message({
            type: 'error',
            message: '添加失败',
            duration: 1000, })
        }
        this.dialogFormVisible = false;
      })
    },

    //更新库存表
    updateGoodsInStock(formName){
      this.$refs[formName].validate((valid) => {
        if(valid){
          editStock(this.formInStock).then(res => {
            this.$message({
              type: 'success',
              message: '更新成功!',
              duration:1000
            });
            this.fetchData();
          })
        }else{
          this.$message({
            type: 'error',
            message: '更新失败',
            duration: 1000, })
        }
        this.updateDialogFormVisible = false;
      })
    },

    //删除仓库信息
    stockDelete(row){
      this.$confirm('是否确认删除商品名称为"'+row.gdName+'"的商品？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          skId:row.skId
        }
        delByStockId(params).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          });
          this.fetchData();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      })
    },


    uploadExcelSuccess(){
      this.$message({
        type:"success",
        message:"上传成功"
      })
      this.dialogExcelVisible = false;
      this.fetchData();
    },
    uploadExcelError(err){
      this.$message({
        type:"error",
        message:err
      })
    },

//导出
    dowmLoad(){

    }
  },



  //生命周期钩子函数
  created() {
    this.fetchData()
    this.depotList()
    //this.nameList()
    this.operatorLiat()
  },
}
</script>

<style scoped lang="scss">

</style>
